{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
            <li><a href="#tab-title-recommend" data-toggle="tab">{{ tab_title_recommend }}</a></li>
            <li><a href="#tab-image-recommend" data-toggle="tab">{{ tab_image_recommend }}</a></li>
            <li><a href="#tab-banner" data-toggle="tab">{{ tab_banner }}</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab-general">
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
                <div class="col-sm-10">
                  <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
                  {% if error_name %}
                    <div class="text-danger">{{ error_name }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">{{ entry_image }}</label>
                <div class="col-sm-10">
                  <a href="" id="thumb-image" data-toggle="image" class="img-thumbnail">
                    <img src="{{ thumb }}" alt="" title="" data-placeholder="{{ placeholder }}">
                  </a>
                  <input type="hidden" name="image" value="{{ image }}" id="input-image">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-alpha">{{ entry_color }}</label>
                <div class="col-sm-10">
                  <input type="text" name="color" id="input-alpha" placeholder="{{ entry_color }}" class="form-control" value="{{ color }}"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-products">{{ entry_products }}</label>
                <div class="col-sm-10">
                  <input type="text" name="products" value="" placeholder="{{ entry_products }}" id="input-products" class="form-control" />
                  <div id="product-products" class="well well-sm" style="height: 150px; overflow: auto;">
                    {% for product in products %}
                      <div id="product{{ product.product_id }}"><i class="fa fa-minus-circle"></i> {{ product.name }}
                        <input type="hidden" name="products[]" value="{{ product.product_id }}" />
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                <div class="col-sm-10">
                  <select name="status" id="input-status" class="form-control">
                    {% if status %}
                      <option value="1" selected="selected">{{ text_enabled }}</option>
                      <option value="0">{{ text_disabled }}</option>
                    {% else %}
                      <option value="1">{{ text_enabled }}</option>
                      <option value="0" selected="selected">{{ text_disabled }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="tab-title-recommend">
              <div class="table-responsive">
                <table id="title-recommend" class="table table-striped table-bordered table-hover">
                  <thead>
                    <tr>
                      <td class="text-left">{{ entry_title }}</td>
                      <td class="text-left">{{ entry_href }}</td>
                      <td></td>
                    </tr>
                  </thead>
                  <tbody>
                  {% set title_recommend_row = 0 %}
                  {% if title_recommend %}
                    {% for title in title_recommend %}
                      <tr id="title-recommend-row{{ title_recommend_row }}">
                        <td class="text-left">
                          {% for language in languages %}
                            <div class="input-group">
                              <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
                              <input type="text" name="title_recommend[{{ title_recommend_row }}][name][{{ language.language_id }}]" value="{{ title.name[language.language_id] }}" placeholder="{{ entry_title }}" class="form-control" />
                            </div>
                          {% endfor %}
                        </td>
                        <td class="text-left">
                          <input type="text" placeholder="{{ entry_href }}" name="title_recommend[{{ title_recommend_row }}][href]" value="{{ title.href }}" class="form-control">
                        </td>
                        <td>
                          <button type="button" onclick="$('#title-recommend-row{{ title_recommend_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button>
                        </td>
                      </tr>
                      {% set title_recommend_row = title_recommend_row + 1 %}
                    {% endfor %}
                  {% endif %}
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="2"></td>
                    <td class="text-left"><button type="button" onclick="addTitleRecommend();" data-toggle="tooltip" title="{{ button_title_recommend_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            <div class="tab-pane" id="tab-image-recommend">
              <div class="table-responsive">
                <table id="img-recommend" class="table table-striped table-bordered table-hover">
                  <thead>
                  <tr>
                    <td class="text-left">{{ entry_title }}</td>
                    <td class="text-left">{{ entry_href }}</td>
                    <td></td>
                  </tr>
                  </thead>
                  <tbody>
                  {% set image_recommend_row = 0 %}
                  {% if image_recommend %}
                    {% for image in image_recommend %}
                      <tr id="image-recommend-row{{ image_recommend_row }}">
                        <td class="text-left">
                          {% for language in languages %}
                            <div class="input-group">
                              <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
                              <input type="text" name="image_recommend[{{ image_recommend_row }}][name][{{ language.language_id }}]" value="{{ image.name[language.language_id] }}" placeholder="{{ entry_title }}" class="form-control" />
                            </div>
                          {% endfor %}
                        </td>
                        <td class="text-left">
                          <input type="text" placeholder="{{ entry_href }}" name="image_recommend[{{ image_recommend_row }}][href]" value="{{ image.href }}" class="form-control">
                        </td>
                        <td>
                          <button type="button" onclick="$('#image-recommend-row{{ image_recommend_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button>
                        </td>
                      </tr>
                      {% set image_recommend_row = image_recommend_row + 1 %}
                    {% endfor %}
                  {% endif %}
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="2"></td>
                    <td class="text-left"><button type="button" onclick="addImageRecommend();" data-toggle="tooltip" title="{{ button_image_recommend_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            <div class="tab-pane" id="tab-banner">
              <div class="table-responsive">
                <table id="banners" class="table table-striped table-bordered table-hover">
                  <thead>
                  <tr>
                    <td class="text-left">{{ entry_banner }}</td>
                    <td class="text-left">{{ entry_title }}</td>
                    <td class="text-right">{{ entry_href }}</td>
                    <td></td>
                  </tr>
                  </thead>
                  <tbody>
                    {% set banner_row = 0 %}
                    {% if banners %}
                      {% for banner in banners %}
                        <tr id="banner-row{{ banner_row }}">
                          <td class="text-left">
                            <a href="" id="thumb-banner{{ banner_row }}" data-toggle="image" class="img-thumbnail">
                              <img src="{{ banner.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" />
                            </a>
                            <input type="hidden" name="banners[{{ banner_row }}][image]" value="{{ banner.image }}" id="thumb-banner{{ banner_row }}" />
                          </td>
                          <td class="text-left">
                            {% for language in languages %}
                              <div class="input-group">
                                <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
                                <input type="text" name="banners[{{ banner_row }}][title][{{ language.language_id }}]" value="{{ banner.title[language.language_id] }}" placeholder="{{ entry_title }}" class="form-control" />
                              </div>
                            {% endfor %}
                          </td>
                          <td class="text-right">
                            <input type="text" placeholder="{{ entry_href }}" name="banners[{{ banner_row }}][href]" value="{{ banner.href }}" class="form-control">
                          </td>
                          <td class="text-left"><button type="button" onclick="$('#banner-row{{ banner_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                        </tr>
                        {% set banner_row = banner_row + 1 %}
                      {% endfor %}
                    {% endif %}
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="3"></td>
                    <td class="text-left"><button type="button" onclick="addBanners();" data-toggle="tooltip" title="{{ button_image_recommend_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $("#input-alpha").spectrum({
    color: "{{ color }}",
    preferredFormat: 'rgb'
  });
  // products
  $('input[name=\'products\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              value: item['product_id']
            }
          }));
        }
      });
    },
    'select': function(item) {
      $('input[name=\'products\']').val('');
      $('#product' + item['value']).remove();
      $('#product-products').append('<div id="product' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="products[]" value="' + item['value'] + '" /></div>');
    }
  });

  $('#product-products').delegate('.fa-minus-circle', 'click', function() {
    $(this).parent().remove();
  });

  // title recommend
  var title_recommend_row = {{ title_recommend_row }};
  function addTitleRecommend() {
    html  = '<tr id="title-recommend-row' + title_recommend_row + '">';
    html += '<td class="text-left">';
    {% for language in languages %}
    html += '<div class="input-group">';
    html += ' <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>';
    html += ' <input type="text" name="title_recommend[' + title_recommend_row + '][name][{{ language.language_id }}]" value="" placeholder="{{ entry_title }}" class="form-control" />';
    html += '</div>';
    {% endfor %}
    html += '</td>';
    html += '<td class="text-left"><input type="text" placeholder="{{ entry_href }}" name="title_recommend[' + title_recommend_row + '][href]" class="form-control"></td>';
    html += '<td class="text-left"><button type="button" onclick="$(\'#title-recommend-row' + title_recommend_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    $('#title-recommend tbody').append(html);
    title_recommend_row++;
  }

  // image recommend
  var image_recommend_row = {{ image_recommend_row }};
  function addImageRecommend() {
    html  = '<tr id="image-recommend-row' + image_recommend_row + '">';
    html += '<td class="text-left">';
    {% for language in languages %}
    html += '<div class="input-group">';
    html += ' <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>';
    html += ' <input type="text" name="image_recommend[' + image_recommend_row + '][name][{{ language.language_id }}]" value="" placeholder="{{ entry_title }}" class="form-control" />';
    html += '</div>';
    {% endfor %}
    html += '</td>';
    html += '<td class="text-left"><input type="text" placeholder="{{ entry_href }}" name="image_recommend[' + image_recommend_row + '][href]" class="form-control"></td>';
    html += '<td class="text-left"><button type="button" onclick="$(\'#image-recommend-row' + image_recommend_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    $('#img-recommend tbody').append(html);
    image_recommend_row++;
  }

  // banners
  var banner_row = {{ banner_row }};
  function addBanners() {
    html  = '<tr id="banner-row' + banner_row + '">';
    html += ' <td class="text-left">';
    html += '   <a href="" id="thumb-banner"' + banner_row + ' data-toggle="image" class="img-thumbnail">';
    html += '     <img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="banners[' + banner_row + '][image]" value="" id="banner-row' + banner_row + '" />';
    html += '   </a>';
    html += ' </td>';
    html += ' <td class="text-left">';
    {% for language in languages %}
    html += '<div class="input-group">';
    html += ' <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>';
    html += ' <input type="text" name="banners[' + banner_row + '][title][{{ language.language_id }}]" value="" placeholder="{{ entry_title }}" class="form-control" />';
    html += '</div>';
    {% endfor %}
    html += ' </td>';
    html += ' <td class="text-left"><input type="text" placeholder="{{ entry_href }}" name="banners[' + banner_row + '][href]" class="form-control"></td>';
    html += ' <td class="text-left"><button type="button" onclick="$(\'#banner-row' + banner_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    $('#banners tbody').append(html);
    banner_row++;
  }
</script>
{{ footer }}